<!--
 * @Description: 首页组件
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: YaoXiaoTian
 * @LastEditTime: 2021-06-05 17:31:15
 -->
<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <!-- <img src="@/assets/imgs/home_banner.jpg"/> -->
      <Banner></Banner>
      <!-- <slideshow /> -->
    </div>
    <!-- 轮播图END -->
    <!-- 推荐特产 -->
    <recommendProduct :recommendProList="recommendProList" />
    <!-- 热门商品和攻略游记 -->
    <div class="vessle">
      <hotCommodity :hotProList="hotProList" />
      <strategyTravels :homeArticleList="homeArticleList" />
    </div>
  </div>
</template>
<script>
// import slideshow from '../components/slideshow'
import Banner from "@/components/banner/index";
import recommendProduct from "../components/recommendProduct";
import hotCommodity from "../components/hotCommodity";
import strategyTravels from "../components/strategyTravels";

export default {
  data() {
    return {
      recommendProList: [],
      hotProList: [],
      homeArticleList: [],
    };
  },
  components: {
    // slideshow,
    Banner,
    recommendProduct,
    hotCommodity,
    strategyTravels,
  },
  watch: {},
  created() {
    this.getRecommendPro();
    this.getHotPro();
    this.getHomeArticle();
  },
  methods: {
    getHomeArticle() {
      this.$http
        .fetch(this.$apiPath.getHomeArticle, {
          method: "get",
        })
        .then((res) => {
          this.homeArticleList = res.data;
        });
    },
    getHotPro() {
      this.$http
        .fetch(this.$apiPath.getHotPro, {
          method: "get",
        })
        .then((res) => {
          this.hotProList = res.data.records;
        });
    },
    getRecommendPro() {
      this.$http
        .fetch(this.$apiPath.getRecommendProPc, {
          method: "get",
        })
        .then((res) => {
          this.recommendProList = res.data;
        });
    },
  },
};
</script>
<style scoped>
@import "../assets/css/index.css";
.block {
  width: 100%;
  height: 600px;
}
.block img {
  width: 100%;
  height: 100%;
}
.vessle {
  width: 100%;
  background-color: #f9f9f9;
}
</style>
